<template>
    <div class="jd-home-goods-list">
        <!-- 使用 vant 内的 List 组件 -->
        <!-- 如果需要下拉刷新, 包裹该标签 -->
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list class="goods-list-box" v-model:loading="loading" :finished="finished" finished-text="没有更多了"
                :offset="100" @load="loadGoodsListHandler">
                <div class="goods-item" v-for="item in goodsList" :key="item.proid">
                    <img :src="item.img1" alt="">
                    <p class="title van-multi-ellipsis--l2">
                        {{ item.proname }}
                    </p>
                    <p class="price">
                        <span class="current">
                            ￥ {{ item.issale ? (item.originprice * 10 / item.discount).toFixed(2) :
                                    item.originprice.toFixed(2)
                            }}
                        </span>
                        <span class="old">
                            ￥ {{ item.originprice.toFixed(2) }}
                        </span>
                    </p>
                    <p class="tags">
                        <van-tag type="danger">{{ item.category }}</van-tag>
                        <van-tag type="primary">{{ item.brand }}</van-tag>
                    </p>
                </div>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
// 导入请求相关接口
import { goodsListApi } from '@/api/goods.ts'
// 导入ts相关接口
import type { MyHotItem } from '@/config/interface'


// 准备列表控制变量
// 加载数据的时候,会自动把loading设置为true
// 当你加载完毕以后,会自动把loading 修改为false即可
const loading = ref<boolean>(false)

// 当你没有更多数据的时候把该数据的值变成true,不会再次加载了
const finished = ref<boolean>(false)

// 准备一个变量,存储商品列表数据
const goodsList = ref<MyHotItem[]>([])

// 准备一个变量,表示下拉刷新控制器
const refreshing = ref<boolean>(false)

// 准备一个数据表示请求相关信息
const goodsInfo = reactive({ count: 1, limitNum: 10 })
// 滚到到底部时触发的事件
const loadGoodsListHandler = async () => {
    setTimeout(async () => {
        // console.log('需要加载更多数据了');
        const res = await goodsListApi(goodsInfo)
        console.log(res);
        // 注意：不能直接替换数组,而是要把本次的内容拼接在上一次的内容后面
        goodsList.value = [...goodsList.value, ...res.data]
        // 修改一下goodsInfo内的count，为了下次加载的时候加载第二页
        goodsInfo.count++
        // 把加载完毕的状态修改为false
        loading.value = false
        // 判断一下,如果res.data的length为空,那么不需要再次loading了
        if (!res.data.length) finished.value = true
    }, Math.random() * 1000 + 2000)
}

// 下拉刷新的时候执行的代码
const onRefresh = () => {
    setTimeout(async () => {
        // 让当前页变成第一页(模拟一个 2 ~ 7 的随机数)
        // 注意: 不应该依赖前端变化, 依赖后端变化
        goodsInfo.count = Math.floor(Math.random() * 5 + 2)
        // 请求数据
        const res = await goodsListApi(goodsInfo)
        // 本次需要完整替换
        goodsList.value = res.data
        // 让当前页++
        goodsInfo.count++
        // 让下拉刷线控制变量换成 false
        refreshing.value = false
        // 因为刷新以后可以从新加载了
        // 为了避免拉到底以后, 刷新以后没有第二页了
        finished.value = false
    }, Math.random() * 1000 + 2000)
}
</script>

<style scoped lang="scss">
@import '@/styles/variable.scss';

.jd-home-goods-list {
    box-sizing: border-box;
    padding: 0 15px;

    .goods-list-box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;

        .goods-item {
            width: 45%;
            border: 1px solid #333;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 5px;
            overflow: hidden;
            padding-bottom: 5px;

            >p {
                margin: 0;
            }

            >img {
                width: 100%;
                height: 170px;
                display: block;
            }

            >.title {
                font-size: 12px;
            }

            >.price {
                font-size: 12px;
                color: #ccc;
                width: 100%;
                display: flex;
                justify-content: space-evenly;

                >.current {
                    font-size: 16px;
                    color: $globalColor;
                }

                >.old {
                    text-decoration: line-through;
                }
            }

            >.tags {
                width: 100%;
                display: flex;
                justify-content: space-evenly;
            }
        }
    }
}
</style>